<template>
	<view class="content">
		<view class="titleInfo">
			<!-- 本日打卡完成计划会被移除，次日正常显示 -->
			<marquee direction="left"
			         behavior="scroll"
			         scrollamount="5px">
			   <span v-if="level !== 2"> 本日打卡完成计划将会被移除，次日正常显示</span>
			   <span v-else> 团队打卡是团队所有人共同创建，团队成员均可创建计划，每个计划每人每天只能进行一次，打卡记录以第一个打卡者为准</span>
			</marquee>
		</view>
		<!-- <marquee direction="left"
		         behavior="scroll"
		         scrollamount="5px">
		    本日打卡完成计划会被移除，次日正常显示
		</marquee> -->

		<!-- <view class="uni-form-item uni-column">
			<picker @change="bindPickerChange" :range="array">
				<label>
					<button type="primary">筛选</button>
				</label>
			</picker>
		</view> -->
		<view class="items" v-for="(item,index) in clockData" :key="index">
			<view class="titles" @tap="goDetail(item)">
				<h3>{{ item.title }}</h3>
				<p style="color: #d1c3b0;margin: 10rpx 0;">任务积分：{{item.integral}}</p>
				<p style="color: #d1c3b0;" v-if="item.level === 2">打卡人：{{ item.user }}</p>
			</view>
			<view class="btn">
				<!-- <button :type="item.status === '0' ? 'primary' : 'default'" :disabled="item.status === '1' " @tap="clockIn(item)">{{ item.status === '0' ? '打卡' : '已打卡'}}</button> -->
				<button :type="item.status === 0 ? 'primary' : 'default'" :disabled="item.status === 1 " @tap="clockIns(item)">{{ item.status === 0 ? '打卡' : '已打卡'}}</button>
			</view>
		</view>
		<view class="add" @tap="goAdd">
			<image src="https://longyugou.top:8008/small/add.png" mode="widthFix" class="addImg"></image>
		</view>
	</view>
</template>

<script>
	import { selectPlan,clockIn, selectTodayAllClock } from "@/api/index.js"
	export default {
		data() {
			return {
				index: 0,
				level: null,
				array: ['-- 请选择 --','已打卡','未打卡'],
				clockTem: [],
				clockData: [
					// {
					// 	title: '健身打卡',
					// 	status: 0
					// },
					// {
					// 	title: '健身打卡',
					// 	status: 0
					// },
					// {
					// 	title: '健身打卡',
					// 	status: 0
					// },
					// {
					// 	title: '健身打卡',
					// 	status: 0
					// },
					// {
					// 	title: '健身打卡',
					// 	status: 0
					// },
					// {
					// 	title: '学习打卡',
					// 	status: 1
					// }
				]
			}
		},
		onLoad(val) {
			this.level = JSON.parse(decodeURIComponent(val.level));
			if(this.level === 2) {
				this.selectTodayAllClocks()
			} else {
				this.userDatas(this.level)
			}
		},
		methods: {
			async selectTodayAllClocks(){
				let res = await selectTodayAllClock();
				console.log(res.data,'oooooooooooo');
				this.clockData = res.data.data
			},
			async clockIns(data){
				data.status = 1
				data.times = Date.parse(new Date());
				data.duration = Date.parse(new Date()) - new Date(new Date().setHours(0,0,0,0)).getTime();
				data.level = this.level
				await clockIn(data)
				this.userDatas(this.level)
				let temDate = (data.duration + 1000*60*60*24) - data.times;
				setTimeout(()=>{
					setInterval(()=>{
						this.clockData.forEach(v=>{
							v.status = 0
						})
					},1000*60*60*24)
				},temDate/1000)
			},
			async userDatas(data){
				let params = {
					user: uni.getStorageSync('users'),
					level: data
				}
				
				let res = await selectPlan(params);
				console.log(res,'lllllllllll');
				if(res){
					let temp = res.data
					if(res.data.code === 1001){
						 // if(res.data.data.length > 0){
							//  for(let i = 0; i < temp.value.length; i ++){
							// 	 for(let j = 0; j < temp.data.length; j ++){
							// 		 if(temp.value[i].title === temp.data[j].title){
							// 			 temp.value.splice(i,1)
							// 		 }
							// 	 }
							//  }
						 // }
						 let arr = []
						 temp.data.forEach(item => {
							 if(item.status === 0) {
								 arr.push(item)
							 }
						 })
						 // filter(item => item.status === 0)
						this.clockData = arr
					} else if(res.data.code === 1002){
						this.clockData = res.data.data;
					}
				}
			},
			goDetail(data){
				console.log(data);
				uni.navigateTo({
					url: "/pages/detail/detail?value=" + encodeURIComponent(JSON.stringify(data))
				})
			},
			goAdd(){
				uni.navigateTo({
					url: "/pages/addPlan/addPlan?level=" + encodeURIComponent(JSON.stringify(this.level))
				})
			}
			// bindPickerChange(e) {		//改变的事件名
			// 	// console.log('picker发送选择改变，携带值为', e.target.value)   //用于输出改变索引值
			// 	// this.index = e.target.value			//将数组改变索引赋给定义的index变量
			// 	var statusTem = '';
			// 	let clockTems = [];
			// 	if(e.target.value === 1){
			// 		statusTem = '1'
			// 	} else if(e.target.value === 2){
			// 		statusTem = '0'
			// 	}
			// 	// this.jg=this.array[this.index]		//将array【改变索引】的值赋给定义的jg变量
			// 	console.log("籍贯为：",statusTem,typeof(statusTem))		//输出获取的籍贯值，例如：中国
			// 	if(statusTem !== ''){
			// 		clockTems = this.clockTem.filter(v=>v.status == statusTem);
			// 		this.clockData = clockTems
			// 	} else {
			// 		this.userDatas()
			// 	}
			// },
		}
	}
</script>

<style>
	/* page{
		height: 100%;
	} */
	.content {
		width: 100%;
		/* height: 100%; */
		/* background-color: antiquewhite; */
		padding-bottom: var(--window-bottom);
		margin-bottom: var(--window-bottom);
	}
	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		margin: 5rpx 0;
		background: #fff;
	}
	.add {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: calc(var(--window-bottom) + 50rpx);
		z-index: 1000;
	}
	.addImg {
		width: 80rpx;
		height: 80rpx;
	}
	.titleInfo{
		background-color: #fff;
		color: #cfb9b9;
		padding: 10rpx;
		transition: 1s;
		font-size: 0.8rem;
		/* animation: 5s move; */
		text-align: center;
	}
	@keyframes move{
		0% {
			margin: 0;
		}
		100% {
			margin-left: -750rpx;
		}
	}
</style>
